<template>
	<assNavbar title="话题"></assNavbar>
	<view class="content" :style="{height:state.height + 'px'}">
		<view class="list ss-flex justify-start flex-wrap">
			<view class="item" :style="{borderColor:item.show ? theme.main_color : '#F0F0F0'}" @click="change(item)" v-for="(item,index) in state.list" :key="index">{{item.name}}</view>
		</view>
	</view>
</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue'
	import sheep from '@/sheep';
	import API from '../api'
	import association from '@/association/store'
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
	} from 'vue';

	const state = reactive({
		height:0,
		list:[],
		select_list:[]
	})
	const theme = computed(() => association().theme)
	onLoad((options) => {
		if (options) {
			state.select_list = options.tag_ids ? options.tag_ids.split(',') : []
		}
		let system = uni.getSystemInfoSync()
		state.height = system.windowHeight - (sheep.$platform.device.statusBarHeight + 44)
		getTag()
	})
	
	const change = (item) => {
		let index = state.select_list.findIndex(value => value === item.name)
		item.show = !item.show
		if (index === -1) {
			state.select_list.push(item.name)
		} else {
			state.select_list.splice(index,1)
		}
		uni.$emit('setMain',{list:state.select_list})
	}
	
	const getTag = async () => {
		const {code,data} = await API.publish.subject()
		if (code === 1) {
			state.list = data.data.map(item => {
				return {
					show:state.select_list.includes(item.name),
					...item,
				}
			})
		}
	}
</script>


<style lang="scss" scoped>
	@import '@/association/scss/index.scss';

	view {
		box-sizing: border-box;
	}

	.content {
		background-color: #fff;
		padding: 20rpx 30rpx 0;
		
		.list {
			.item {
				height: 68rpx;
				padding: 0 38rpx;
				border-radius: 16rpx;
				border: 2rpx solid;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 68rpx;
				color: #666666;
				margin: 0 26rpx 30rpx 0;
			}
		}
	}
</style>